<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen">
    /*<!-- transform之translate移动 -->*/

    .father {
        height: 500px;
        width: 500px;
        background: #333;
        perspective: 800px;
        text-align: center;
        margin: 300px auto;
    }
    .translate_div1 {
        height: 120px;
        width: 120px;
        background: red;
        color: #fff;
        line-height: 120px;
        text-align: center;
    }
    /*注意transition需要事件触发
    	1：translate3d(300px,300px,300px)
    	类似这种3d效果必须在动画元素的外层元素（父级元素）添加属性perspective,定义视点距离，否则看不出效果
    	比如perspective: 800px;
		2：transform-origin是设置转换的基准点，旋转最能看出这个属性的效果
			该属性必须和transform一起使用
    */

    .translate_div1:hover {
        /*transform: translate(400px,400px);*/
        /*transform: translate3d(300px, 300px, 400px);*/
        /*transform: scale3d(2, 3, 4);*/
        transform: rotate(45deg);
        /*transform-origin: bottom center 200px;*/
        transition: transform 4s ease;
    }
    </style>
</head>

<body>
    <!-- 
	transform:转化,转换，变换
	transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转rotate、缩放scale、移动translate或倾斜skew
	 -->
    <div class="father">
        <div class="translate_div1">translate_div1</div>
    </div>
</body>

</html>